<template>
    <div class="container">
        <div class="flex-box-align" style="padding-bottom: 20px;border-bottom: 1px solid #f4f4f4">
            <div class="flex">随访复诊</div>
            <el-button @click="$router.back(-1)" type="primary" size="medium">返回</el-button>
        </div>

        <ul class="time-list flex-box-container">
            <li v-for="(item, index) in list" :class="{active: activeIndex == index}" :key="index" @click="handleToggle(item.id, index)">{{item.gmtCreated}} /</li>
        </ul>

        <div class="flex-box-container">
            <ul class="follow-info flex" v-if="showDetail">
                <li>
                    <span>姓名：</span>
                    <span v-if="name">{{name}}</span>
                    <span v-else>暂无数据</span>
                </li>
                <li>
                    <span>看诊地点：</span>
                    <span v-if="listItem.province">{{listItem.province}}{{listItem.city}}{{listItem.district}}</span>
                    <span v-else>暂无数据</span>
                </li>
                <li>
                    <span>看诊时间：</span>
                    <span v-if="listItem.inquiryTime">{{listItem.inquiryTime}}</span>
                    <span v-else>暂无数据</span>
                </li>
                <li class="flex-box-align">
                    <span>复诊情况：</span>
                    <el-input v-if="listItem.reviewSituation" :disabled="true" type="textarea" style="width: 200px" v-model="listItem.reviewSituation" placeholder="请输入"></el-input>
                    <span v-else>暂无数据</span>
                </li>
                <li class="flex-box-align">
                    <span>用药情况：</span>
                    <el-input v-if="listItem.useDrugSituation" :disabled="true" type="textarea" style="width: 200px" v-model="listItem.useDrugSituation" placeholder="请输入"></el-input>
                    <span v-else>暂无数据</span>
                </li>
            </ul>

            <ul class="follow-info flex" v-else>
                <li>
                    <span>姓名：</span>
                    <span>{{name}}</span>
                </li>
                <li class="flex-box-align">
                    <span>看诊地点：</span>
                    <v-distpicker :province="listItem.province" :city="listItem.city" :area="listItem.district"
                                  @province="selectProvince"
                                  @city="selectCity"
                                  @area="selectArea"
                    ></v-distpicker>
                </li>
                <li class="flex-box-align">
                    <span>看诊时间：</span>
                    <el-date-picker
                            v-model="listItem.inquiryTime"
                            type="datetime"
                            placeholder="例：2018-02-01 13:00">
                    </el-date-picker>
                </li>
                <li class="flex-box-align">
                    <span>复诊情况：</span>
                    <el-input type="textarea" autosize style="width: 200px" v-model="listItem.reviewSituation" placeholder="请输入"></el-input>
                </li>
                <li class="flex-box-align">
                    <span>用药情况：</span>
                    <el-input type="textarea" autosize style="width: 200px" v-model="listItem.useDrugSituation" placeholder="请输入"></el-input>
                </li>
            </ul>
            <div style="margin-top: 20px" v-if="list.length">
                <el-button type="primary" @click="handleClickSave" v-if="!showDetail">保存</el-button>
                <el-button type="primary" @click="showDetail = false" v-else>编辑</el-button>
            </div>
        </div>

    </div>
</template>

<script>
    let CONSTANT = require('../../constant/constant.js');
    let common = require("../../common.js");
    import {parseUrlParams} from "../../util";
    import VDistpicker from 'v-distpicker'

    export default {
        data() {
            return {
                showDetail: true,
                list: [],
                listItem: "",
                id: "",
                name: "",
                activeIndex: 0,
            }
        },
        components: {
            VDistpicker
        },
        mounted() {
            this.name = decodeURIComponent(parseUrlParams("name"))
            let params = {
                patientId: parseUrlParams("id"),

            }
            common.requestAjax(CONSTANT.URL.PATIENT.FOLLOWLIST, JSON.stringify(params), {pageIndex: 1, pageSize: 10 }, (res) => {
                if (res.status == 200) {
                    this.list = res.data.bussData
                    if (this.list.length) {
                        this.listItem = this.list[0]
                        this.activeIndex = 0
                        this.id = this.listItem.id
                    }

                }
            }, null)
        },
        methods: {
            selectProvince(val) {
                this.province = val.code
            },
            selectCity(val) {
                this.city = val.code
            },
            selectArea(val) {
                this.district = val.code
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {

            },
            handleClickSave() {
                let params = {
                    id: this.id,
                    patientId: parseUrlParams("id"),
                    province: this.listItem.province,
                    city: this.listItem.city,
                    district: this.listItem.district,
                    inquiryTime: this.listItem.inquiryTime,
                    reviewSituation: this.listItem.reviewSituation,
                    useDrugSituation: this.listItem.useDrugSituation,
                }
                common.requestAjax(CONSTANT.URL.PATIENT.FOLLOWEDIT, JSON.stringify(params), {}, (res) => {
                    if (res.status == 200) {
                        this.$message({
                            type: "success",
                            message: res.msg
                        })
                        this.showDetail = true
                    }
                })
            },
            handleToggle(id, index) {
                this.id = id
                this.activeIndex = index
                this.listItem = this.list[index]
            }
        }
    }
</script>

<style lang="scss">
    .container {
        .time-list {
            padding: 10px 0;
            border-bottom: 1px solid #efefef;
            li {
                color: #02b5f9;
                cursor: pointer;
            }
            li.active {
                color: #000;
            }
        }
        .follow-info {
            li {
                margin-top: 20px;
            }
            li>span:nth-child(1) {
                display: inline-block;
                width: 200px;
            }

        }


    }
</style>
